<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <th:block th:replace="reader/common :: heads"></th:block>
</head>
<body>

<th:block th:replace="reader/common :: navbar"></th:block>

<main class="page blog-post-list">
    <section class="clean-block clean-blog-list dark">
        <div class="container">
            <div class="block-heading"></div>
            <div class="block-content">
                <div class="container">
                    <div class="row">
                        <!-- TODO: remove token -->
                        <div class="col-lg-3"><img class="rounded img-fluid" th:src="${book.getCoverUrl()} + '?token=GroupA3'"></div>
                        <div class="col-lg-9">
                            <h3><strong th:text="${book.getTitle()}"></strong></h3>
                            <br>
                            <h5 class="text-muted" th:text="${book.getAuthor()}"></h5>
                            <h5 class="text-muted" th:text="${book.getPublisher()} + ' ' + ${book.getPublishYear()}"></h5>
                            <br>
                        </div>
                    </div>
                </div>
                <div class="box" style=" display: flex; justify-content: space-between; align-items: center;font-size: 23px;line-height: 70px;font-weight: 500;">
                    <span class="text text-muted" style="margin-right: 20px;">Details</span>
                    <span style="height:2px; flex-grow: 1; background-color: gray;"></span>
                </div>
                <table class="table table-hover">
                    <tbody>
                    <tr>
                        <td style="padding-right: 100px;"><strong>Title</strong></td>
                        <td th:text="${book.getTitle()}"></td>
                    </tr>
                    <tr>
                        <td><strong>ISBN</strong></td>
                        <td th:text="${book.getISBN()}"></td>
                    </tr>
                    <tr>
                        <td><strong>Author</strong></td>
                        <td th:text="${book.getAuthor()}">JamesF.Kurose/KeithW.Ross</td>
                    </tr>
                    <tr>
                        <td><strong>Category</strong></td>
                        <td th:text="${book.getCategory().getCategoryName()}">Tech.</td>
                    </tr>
                    <tr>
                        <td><strong>Publisher</strong></td>
                        <td th:text="${book.getPublisher()}">Pearson</td>
                    </tr>
                    <tr>
                        <td><strong>Publish year</strong></td>
                        <td th:text="${book.getPublishYear()}">2012</td>
                    </tr>
                    <tr>
                        <td><strong>Location</strong></td>
                        <td th:text="${book.getLocation()}">Floor 2 - Shelf 1</td>
                    </tr>
                    <tr>
                        <td><strong>Price</strong></td>
                        <td th:text="${book.getPrice()}">100</td>
                    </tr>
                    <tr>
                        <td><strong>Copy number</strong></td>
                        <td th:text="${copyNumber}">2</td>
                    </tr>
                    <tr>
                        <td><strong>Summary</strong></td>
                        <td>
                            <span class="text-muted text" style="font-size: 40px;line-height: 30px;font-weight: 600;">“</span>
                            <spa th:text="${book.getSummary()}">Computer Networking continues with an early emphasis on application-layer paradigms and application programming interfaces (the top layer), encouraging a hands-on experience with protocols and networking concepts, before working down the protocol stack to more abstract layers.This book has become the dominant book for this course because of the authors’ reputations, the precis...Computer Networking continues with an early emphasis on application-layer paradigms and application programming interfaces (the top layer)</span>>
                            <br><span class="text-muted text" style="font-size: 40px;font-weight: 600;">”</span>
                        </td>
                    </tr>

                    </tbody>
                </table>
                <div class="box" style=" display: flex; justify-content: space-between; align-items: center;font-size: 23px;line-height: 70px;font-weight: 500;">
                    <span class="text text-muted" style="margin-right: 20px;">Reserve</span>
                    <span style="height:2px; flex-grow: 1; background-color: gray;"></span>
                </div>

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Book Id</th>
                            <th>Location</th>
                            <th>Reserve</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="bookModel: ${bookModels}">
                            <td th:text="${bookModel.getBookId()}"></td>
                            <td th:text="${bookModel.getBookDescription().getLocation()}"></td>
                            <td>
                                <button th:if="${bookModel.getDeleted() == false && bookModel.getReserved() == false && bookModel.getBorrowed() == false}" class="btn btn-primary" th:onclick="reserve([[${bookModel.getBookId()}]])">+ Reserve</button>
                                <p th:if="${bookModel.getDeleted() == true}" class="text-danger" >lost</p>
                                <p th:if="${bookModel.getReserved()== true}" class="text-danger" >reserved</p>
                                <p th:if="${bookModel.getBorrowed()== true}" class="text-danger" >borrowed</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</main>

<th:block th:replace="reader/common :: footer"></th:block>
<th:block th:replace="reader/common :: scripts"></th:block>
<script>
    function reserve(id) {
        $.ajax({
            url: "/api/book/reserve/"+id,
            type: "POST",
            success: function (resp){
                alert("success");
                window.location.href=window.location.href;
            },
            error: function (resp) {
                console.log(resp);
                alert(resp.responseJSON.message);
            }
        });
    }
</script>

</body>
</html>